<!-- 支付 -->
<template>
  <div class="payment-container">
    <HeadNav title="收银台"></HeadNav>
    
    <div class="payment-content">
      <!-- 订单信息 -->
      <div class="order-info">
        <div class="order-header">
          <i class="el-icon-success success-icon" v-if="paymentStatus === 'success'"></i>
          <i class="el-icon-warning warning-icon" v-else-if="paymentStatus === 'failed'"></i>
          <i class="el-icon-loading loading-icon" v-else></i>
          <span class="status-text">{{ statusText }}</span>
        </div>
        
        <div class="order-detail">
          <div class="detail-row">
            <span>订单编号</span>
            <span>{{ orderId }}</span>
          </div>
          <div class="detail-row">
            <span>应付金额</span>
            <span class="amount">¥{{ amount.toFixed(2) }}</span>
          </div>
          <div class="detail-row" v-if="paymentMethod">
            <span>支付方式</span>
            <span>{{ paymentMethod === 1 ? '微信支付' : '支付宝' }}</span>
          </div>
        </div>
      </div>
      
      <!-- 支付方式选择 -->
      <div class="payment-methods" v-if="!paymentStatus">
        <div class="section-title">选择支付方式</div>
        <div class="methods-list">
          <div 
            class="method-item" 
            :class="{ 'active': selectedMethod === 1 }"
            @click="selectedMethod = 1"
          >
            <i class="iconfont icon-weixin"></i>
            <span>微信支付</span>
          </div>
          <div 
            class="method-item" 
            :class="{ 'active': selectedMethod === 2 }"
            @click="selectedMethod = 2"
          >
            <i class="iconfont icon-zhifubao"></i>
            <span>支付宝</span>
          </div>
        </div>
        
        <div class="payment-btn">
          <el-button 
            type="primary" 
            size="large" 
            :loading="paying"
            @click="handlePayment"
          >
            立即支付 ¥{{ amount.toFixed(2) }}
          </el-button>
        </div>
      </div>
      
      <!-- 支付结果 -->
      <div class="payment-result" v-if="paymentStatus">
        <div class="result-actions" v-if="paymentStatus === 'success'">
          <el-button type="primary" @click="$router.push('/orders')">查看订单</el-button>
          <el-button @click="$router.push('/')">返回首页</el-button>
        </div>
        <div class="result-actions" v-else-if="paymentStatus === 'failed'">
          <el-button type="primary" @click="retryPayment">重新支付</el-button>
          <el-button @click="$router.push('/orders')">查看订单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeadNav from '../components/HeadNav.vue';

export default {
  components: {
    HeadNav
  },
  data() {
    return {
      orderId: '',
	  paymentMethod:1,
      amount: 0,
      selectedMethod: 1, // 1-微信 2-支付宝
      paying: false,
      paymentStatus: '', // 'success', 'failed', ''
      timer: null
    };
  },
  computed: {
    statusText() {
      switch(this.paymentStatus) {
        case 'success':
          return '支付成功';
        case 'failed':
          return '支付失败';
        default:
          return '等待支付';
      }
    }
  },
  created() {
    this.orderId = this.$route.query.orderId;
    this.amount = parseFloat(this.$route.query.amount) || 0;
    
    if (!this.orderId) {
      this.$message.error('订单信息不存在');
      this.$router.push('/');
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  },
  methods: {
    handlePayment() {
      this.paying = true;
      
      // 模拟支付API调用
      this.$http.post('/api/payment/create', {
        orderId: this.orderId,
        amount: this.amount,
        method: this.selectedMethod
      })
        .then(() => {
          // 模拟支付处理中
          this.timer = setTimeout(() => {
            // 这里随机模拟成功或失败，实际项目中根据API返回结果
            const isSuccess = Math.random() > 0.2;
            this.paymentStatus = isSuccess ? 'success' : 'failed';
            this.paying = false;
          }, 2000);
        })
        .catch(error => {
          console.error('支付请求失败:', error);
          this.$message.error('支付请求失败: ' + (error.response?.data?.message || error.message));
          this.paying = false;
        });
    },
    
    retryPayment() {
      this.paymentStatus = '';
      this.handlePayment();
    }
  }
};
</script>

<style scoped>
.payment-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.payment-content {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.order-info {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.order-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.success-icon {
  color: #67C23A;
  font-size: 24px;
  margin-right: 10px;
}

.warning-icon {
  color: #E6A23C;
  font-size: 24px;
  margin-right: 10px;
}

.loading-icon {
  color: #409EFF;
  font-size: 24px;
  margin-right: 10px;
  animation: rotating 2s linear infinite;
}

.status-text {
  font-size: 18px;
  font-weight: bold;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  color: #666;
}

.detail-row .amount {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}

.payment-methods {
  padding: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}

.methods-list {
  display: flex;
  margin-bottom: 30px;
}

.method-item {
  flex: 1;
  padding: 15px;
  margin-right: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s;
}

.method-item:last-child {
  margin-right: 0;
}

.method-item:hover {
  border-color: #409EFF;
}

.method-item.active {
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.method-item i {
  font-size: 24px;
  margin-right: 8px;
}

.method-item i.icon-weixin {
  color: #09BB07;
}

.method-item i.icon-zhifubao {
  color: #00AAEE;
}

.payment-btn {
  text-align: center;
  margin-top: 30px;
}

.result-actions {
  text-align: center;
  margin-top: 30px;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>